<template>
  <div class="container">
     <div class="left">
          <div class="city" @click="clickFn" >
            <span>{{city}}</span>
            <van-icon name="play" />
            <span class="right"></span>
          </div>
          <div class="input">
            <van-search v-model="value" placeholder="请输入小区或地址" />
          </div>
        </div>
        <div class="map">
          <i class="iconfont icon-ditu"></i>
        </div>
  </div>
</template>

<script>
export default {
  props: {
    city: {
      required: true
    }
  },
  data () {
    return {
      value: ''
    }
  },
  methods: {
    clickFn () {
      console.log('想要获取城市列表')
      this.$router.push('/city')
    }
  }
}
</script>

<style lang="less" scoped>
.container{
  display: flex;
}
 .left {
        display: flex;
        width: 85%;
        background-color: #fff;
        padding-left: 10px;
        border-radius: 5px;
        box-sizing: border-box;
        height: 35px;
        .city {
          position: relative;
          width: 60px;
          padding-left: 10px;
          margin-right: 10px;
          height: 35px;
          line-height: 35px;
          span {
            font-size: 14px;
            color: #333333;
            margin-right: 5px;
          }
          .van-icon {
            transform: rotate(90deg);
            color: #7f7f80;
            font-size: 12px;
          }
          .right {
            position: absolute;
            top: 5px;
            right: 0;
            display: inline-block;
            height: 25px;
            width: 1px;
            background-color: #ccc;
          }
        }
        .input {
          .van-search {
            background-color: none;
            padding: 0;
            .van-search__content {
              background-color: #fff;
            }
          }
          .van-cell{
            height: 30px;
          }
        }
      }
      .map {
        height: 27px;
        width: 27px;
        transform: translateY(4px);
        line-height: 25px;
        margin-left: 10px;
        text-align: center;
        box-sizing: border-box;
        border-radius: 50%;
        border: 2px solid #fff;

        .iconfont {
          font-size: 17px;
          color: #fff;
        }
      }
      .icon-ditu{
        margin-left: -20px;
      }
</style>
